@extends('PShop::layout')
@push('styles')
    <link rel="stylesheet" href="{{asset(config('mall.pc_assets').'/detail/plugins/bigGlass/amazeui.magnifier.css')}}">
    <style type="text/css">
        .order-list-panel .am-tabs-d2 .am-tabs-nav{background-color: #e7e7e7;width: 100%;}
        .am-badge {padding: 0.5em 0.625em;margin-bottom: 0.5rem;font-size: 1.4rem;font-weight: normal;
            color: #999999;border: 1px solid #eee;background-color: transparent;border-radius: 3px;}
    </style>
@endpush
@section('content')
    <section class="wapper" data-html="shopDetail">
        <div class="base-w">
            <ol class="am-breadcrumb am-margin-bottom-0 am-padding-top-sm am-padding-bottom-sm">
                <li><a href="{{route('f_Shop_index')}}">首页</a></li>
                @foreach($cate_titles as $id=>$title)
                <li><a href="{{route('f_Pc_Goods_goodsList',['cate'=>$id])}}">{{$title}}</a></li>
                @endforeach
            </ol>
        </div>
        <div class="am-bg-white">
            <div class="base-w">
                <!--商品图片-->
                <div class="am-padding-top-xl">
                    <div class="img-box am-magnifier">
{{--                        <img width="430" height="430" src="{{config('mall.pc_assets')}}/detail/img/goods/goodx3.png"  data-am-magnify />--}}
                        <img width="430" height="430" id="main-img" src="{{str_first($goods->goods_images)}}"  data-am-magnify />
                        <div data-am-shape="square"></div>
                        <div class="am-margin-left-sm">
                            <img class="big-img" width="900" height="900" src="{{str_first($goods->goods_images)}}">
                        </div>
                    </div>
                    <div class="img-item-list">
                        @php
                        $images = str2arr($goods->goods_images);
                        $len = count($images);
                        @endphp
                        @for($i=0; $i<5; $i++)
                            <div class="img-item"><img src="{{$images[rand(0,$len-1)]}}"></div>
                        @endfor
                    </div>
                    <div class="goods-intro">
                        <div class="am-margin-bottom">
                            <h2>{{$goods->goods_name}}</h2>
                            <p class="am-padding-top-xs am-link-muted">{{$goods->description}}</p>
                        </div>
                        <div class="price-box am-margin-bottom">
                            <div class="am-padding-bottom">
                                <span class="am-text-danger am-blod am-text-xl">￥{{number_format($goods->price,2)}}</span>
                                <span class="am-margin-left-sm" style="color:#616681;"><strike>原价：￥{{number_format($goods->price,2)}}</strike></span>
                            </div>
                            <div class="">
                                <span class="am-margin-right-lg">销量<i class="am-padding-left-xs am-padding-right-xs am-text-danger">{{$goods->show_sales_volume}}</i>件</span>
                                <span class="">库存<i class="am-padding-left-xs am-padding-right-xs am-text-danger">{{$goods->stock}}</i>件</span>
                            </div>
                        </div>
                        <div class="">
                            <form method="post" id="submit-goods">
                                {{csrf_field() }}
                                @if($goods->specs->isNotEmpty())
                                    @foreach($goods->specs as $spec)
                                        <div class="am-g am-padding-bottom-xs goods-specs">
                                            <div class="am-u-md-2 am-u-lg-2">{{$spec->title}}</div>
                                            <div class="am-u-md-10 am-u-lg-10 am-padding-left-0">
                                                <div class="size-group am-avg-md-6 am-avg-lg-6">
                                                    @foreach(str2arr($spec->value) as $item)
                                                        <span class="am-badge spec-value-box  {{$loop->index == 0 ?'active':''}}"><i class="spec-value">{{$item}}</i><em class="{{$loop->index == 0 ?'selected':''}}"></em></span>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                        <input type="hidden" name="is_goods_specs" value="1">
                                    @else
                                        <input type="hidden" name="is_goods_specs" value="0">
                                @endif
                                <input type="hidden" name="goods_specs" value="">
                            <div class="am-g">
                                <div class="am-u-md-2 am-u-lg-2 am-padding-top-xs">数量</div>
                                <div class="am-u-md-10 am-u-lg-10 am-padding-left-0">
                                    <div style="max-width: 11rem;">
                                        <div class="am-input-group buy-num">
                                            <span class="am-input-group-label num-dec"><em class="am-icon-minus"></em></span>
                                            <input type="text" name="number" class="am-form-field am-text-center" max="{{$goods->stock}}" value="1">
                                            <span class="am-input-group-label num-add"><em class="am-icon-plus"></em></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-margin-top-xl">
                                <span class="am-margin-right-sm"><button onclick="buyNow(this);" type="button" data-action="{{route('f_Pc_Order_buyNow',['goods_id'=>$goods->goods_id])}}" class="am-btn am-btn-buy am-padding-sm am-radius">立即购买</button></span>
                                <span class="am-margin-right-sm">
                                    <button onclick="addCart(this)" type="button" class="am-btn am-btn-danger am-padding-sm am-radius"
                                            data-action="{{route('f_Pc_Cart_create',['goods_id'=>$goods->goods_id])}}"
                                            data-next="{{route('f_Pc_Cart_cartList')}}"

                                    >
                                        <i class="am-icon-shopping-cart am-padding-right-xs"></i>加入购物车
                                    </button>
                                </span>
                                <span><a href="#" class="am-btn am-btn-collect am-radius am-btn-xs am-text-center"><i class="am-icon-star am-block am-text-lg"></i>收藏</a></span>
                            </div>
                            </form>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <!--详情-->
                <div class="am-margin-top-xl am-padding-top-lg">
                    <div class="am-g">
                        <div class="rexiao-box am-u-md-4 am-u-lg-3">
                            <h1 class="am-text-sm am-text-center detail-ad-title">热销产品</h1>
                            <div class="rexiao-box" id="goods-tj"
                                 data-url="{{route('f_Pc_Goods_detailAdGoods')}}"
                                 data-link="{{route('f_Pc_Goods_goodsDetails',['goods_id'=>-100])}}"
                            ></div>
                        </div>
                        <div class="am-u-md-8 am-u-lg-9 am-padding-left-0">
                            <div class="am-bg-white order-list-panel am-padding-top-sm">
                                <div data-am-widget="tabs" class="am-tabs am-tabs-d2 am-margin-0 detail-tab">
                                    <ul class="am-tabs-nav am-cf">
                                        <!--此处不建议加 a 标签，禁用框架自带tab切换效果-->
                                        <li class="am-active"><a href="[data-tab-panel-0]">产品详情</a></li>
                                        {{--<li class=""><a href="[data-tab-panel-1]">评论</a></li>--}}
                                        <li class=""><a href="[data-tab-panel-2]">常见问题</a></li>
                                        <li class=""><a href="[data-tab-panel-3]">检测报告</a></li>
                                    </ul>
                                    <div class="am-tabs-bd">
                                        <div data-tab-panel-0 class="am-tab-panel am-active">
                                            <div class="">
                                                {!! $goods->pc_detail !!}
                                            </div>
                                        </div>
                                        <div data-tab-panel-1 class="am-tab-panel ">
                                            <div class="am-padding-top-sm">
                                                <div class="am-margin-bottom">
                                                    <span>96%满意用户评价：</span>
                                                    <span>
							          					<em class="am-text-warning am-icon-star am-text-xl"></em>
							          					<em class="am-text-warning am-icon-star am-text-xl"></em>
							          					<em class="am-text-warning am-icon-star am-text-xl"></em>
							          					<em class="am-text-warning am-icon-star am-text-xl"></em>
							          					<em class="am-text-warning am-icon-star-half-o am-text-xl"></em>
							          				</span>
                                                </div>
                                                <div class="am-margin-bottom">
                                                    <a class="am-badge am-badge-primary">全部(288)</a>
                                                    <a class="am-badge am-badge-primary">满意(288)</a>
                                                    <a class="am-badge am-badge-primary">一般(1)</a>
                                                    <a class="am-badge am-badge-primary">失望(1)</a>
                                                    <a class="am-badge am-badge-primary">有图(10)</a>
                                                    <a class="am-badge am-badge-primary">高性价比(10)</a>
                                                    <a class="am-badge am-badge-primary">全部(288)</a>
                                                    <a class="am-badge am-badge-primary">满意(288)</a>
                                                    <a class="am-badge am-badge-primary">一般(1)</a>
                                                    <a class="am-badge am-badge-primary">失望(1)</a>
                                                    <a class="am-badge am-badge-primary">有图(10)</a>
                                                    <a class="am-badge am-badge-primary">高性价比(10)</a>
                                                </div>
                                                <ul class="am-comments-list am-comments-list-flip am-padding-top-xs">
                                                    <li class="am-comment">
                                                        <a href="#link-to-user-home">
                                                            <img src="#" alt="" class="am-comment-avatar" width="48" height="48">
                                                        </a>
                                                        <div class="am-comment-main">
                                                            <header class="am-comment-hd">
                                                                <div class="am-comment-meta">
                                                                    <a href="javascript:void(0);" class="am-comment-author">小牛牛</a>
                                                                    <div class="am-inline-block am-fr">
						          										<span class="am-padding-right-sm">
												          					<em class="am-text-warning am-icon-star"></em>
												          					<em class="am-text-warning am-icon-star"></em>
												          					<em class="am-text-warning am-icon-star"></em>
												          					<em class="am-text-warning am-icon-star"></em>
												          					<em class="am-text-warning am-icon-star"></em>
												          				</span>
                                                                        <time datetime="" title="">2014-7-12 15:30</time>
                                                                    </div>
                                                                </div>
                                                            </header>
                                                            <div class="am-comment-bd">
                                                                <p>那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？</p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div data-tab-panel-2 class="am-tab-panel ">常见问题</div>
                                        <div data-tab-panel-3 class="am-tab-panel ">检测报告</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('PShop::index.right_nav')
@endsection
@push('scripts')
    <script src="{{asset(config('mall.pc_assets').'/detail/plugins/bigGlass/amazeui.magnifier.min.js')}}"></script>
    <script src="{{asset(config('mall.pc_assets').'/detail/js/detail.js')}}"></script>
    <script src="{{asset(config('view.plugin').'/other/jquery.fly.js')}}"></script>
    <script src="{{asset(config('mall.pc_assets').'/detail/js/detail.js')}}"></script>
    <script>
        $(document).ready(function(){
            getSpecs();
            detailImgLook();
            tJGoods();
            eventBuyNum();
            eventSpec();
            rightNav();
        })
    </script>
@endpush